﻿
@{
    ViewBag.Title = "Index";
}
<br>
<br>
<br>
<br>
<br>
<link href="~/Scripts/layui/css/layui.css" rel="stylesheet" />
<h2>WebSocket上传下载</h2>
<form class="layui-form layui-form-pane1" style="padding-top:10px">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <label>用户名：</label> <input class="layui-input" id="userName" value="测试账号1">
        </div>
        <div class="layui-btn-container layui-inline">
            <input type="file" name="file" class=" layui-btn layui-btn-normal" style="display:inline" id="file">选择文件
            <button class="layui-btn layui-inline" type="button" id="UploadFile">上传文件</button>
        </div>
    </div>
    <div id="view">
        <ul></ul>
    </div>

    <div class="layui-form">
        <table class="layui-table" id="FileTable">
            <thead>
                <tr>
                    <td>文件ID</td>
                    <td>文件名</td>
                    <td>上传人</td>
                    <td>最后修改时间</td>
                    <td>下载次数</td>
                    <td>文件类型</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <td>999</td>
                    <td>测试用数据</td>
                    <td>OrzCoCo</td>
                    <td>时间戳1636709287</td>
                    <td>55</td>
                    <td>text/plan</td>
                    <td onclick="downLoadFileTd('0-测试用.txt');">下载拼接用</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</form>

<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/layui/layui.js"></script>
<script type="text/javascript">

    // 初始化
    var webSocketGetAll;
    var webSocketFile;

    var downloadFileName = "文件名.txt";

    // 下载用连接
    var filesUrl = "WS://localhost:44381/WebSocketCore/DownLoad";
    // 获取用连接，即刷新
    var useUrl = "WS://localhost:44381/WebSocketCore/GetAllFile";

    $(function ()
    {
        //W1 每次刷新，或者重新连接进来获取文件表格
        webSocketGetAll = new WebSocket(useUrl);
        webSocketGetAll.onopen = function () {
            console.log("初始化链接WebScoket创建成功");
            // 发送初始化请求
            webSocketGetAll.send("Init");
        }
        webSocketGetAll.onmessage = function (e) {
            // 初始化成功后，填充文件表格
            var data = e.data;
            $("#FileTable tbody").html("");
            $("#FileTable tbody").append(data);
        }

        // W2 新进入的请求，下载文件使用该WebSocket
        webSocketFile = new WebSocket(filesUrl);
        webSocketFile.onopen = function () {
            console.log("下载WebSocket链接，初始连接成功");
        }
        webSocketFile.onmessage = function (e) {
            var data = e.data;

            // 利用a标签实现下载
            if (data instanceof Blob) {
                console.info(data);
                const url = window.URL.createObjectURL(new Blob([data]))
                const link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', downloadFileName)
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
            }
            $("#FileTable tbody").html("");
            $("#FileTable tbody").append(data);
        }

        $("#UploadFile").on("click", function () {
            var fileController = document.getElementById("file").files;
            var filetest = fileController[0];
            uploadOperate(filetest);

        })
    })

    // 下载文件方法，传入参数为：  文件id-文件名
    function downLoadFileTd(id) {
        var index = id.indexOf('-');
        downloadFileName = id.substring(index + 1, id.length - index + 1);
        console.info(id);
        if (webSocketFile) {
            webSocketFile.send("DownLoad-" + id);
        }
    }

    // 读取文件对象。
    var reader = new FileReader();

    // 读取文件 核心方法
    function readBlob(file) {
        reader.readAsArrayBuffer(file);
    }

    // 上传文件 核心方法
    function uploadOperate(filec) {
        if (filec) {
            //读取文件
            readBlob(filec);

            //读取成功  发送文件
            reader.onload = function () {
                blob = this.result;
                var upLoadFilesUrl = filesUrl +
                    "?FileName=" + filec.name +
                    "&FileSize=" + filec.size +
                    "&LastModified=" + filec.lastModified +
                    "&FileType=" + filec.type +
                    "&UserName=" + $("#userName").val();
                var webSocketFileUpLoad = new WebSocket(upLoadFilesUrl);

                webSocketFileUpLoad.onopen = function () {
                    console.log("connect 链接创建成功");
                    webSocket = webSocketFileUpLoad;
                    webSocketFileUpLoad.send(blob);
                }

                webSocketFileUpLoad.onmessage = function (e) {
                    var data = e.data;
                    if (data instanceof Blob) {
                        console.info(data);
                        const url = window.URL.createObjectURL(new Blob([data]))
                        const link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', downloadFileName)
                        debugger
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link)
                    }
                    $("#FileTable tbody").html("");
                    $("#FileTable tbody").append(data);
                }
                webSocketFileUpLoad.onclose = function (e) {
                    console.log("WebSocket 连接已断开。");
                }
                webSocketFileUpLoad.onerror = function (e) {
                    console.log("发生异常：" + e.message);
                }
            }
        }
    }

</script>



